<template>
	<view class="search-page">
		<view class="search-list padd32">
			<u-search v-model="keyword" focus :clearabled="true" color="#333333" searchIconSize="26" :showAction="true"
				actionText="搜索" :animation="true" @search="searchChange"></u-search>
		</view>
		<view class="list padd32">
			<scroll-view scroll-y="true">
				<view @click="clickJump(item)" class="list-item" v-for="(item, index) in list" :key="index">
					<view class="title">
						{{ item.title }}
					</view>
					<view v-if="item.type === 1" class="img-list">
						<image v-for="(imgItem, index) in item.imageDtos" :key="index" class="mediaType"
							:src="`https://www.worldintek.com:39011/yaolexue-service/${imgItem.compressLink}`" mode="">
						</image>
					</view>
					<view v-else-if="item.type === 2" class="img-list">
						<view class="img-box" v-for="(imgItem, index) in item.imageDtos">
							<image class="mediaType"
								:src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"
								mode="">
							</image>
							<image class="play-icon"
								src="https://www.worldintek.com:39011/yaolexue-service/icon_playCircle.png" mode=""></image>
						</view>
						<!-- 	<video class="mediaType"
							:src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"
							controls muted show-fullscreen-btn :show-mute-btn="true" autoplay="true" object-fit="fill"
							page-gesture="true" controls="false"></video> -->
					</view>
					<view v-else-if="item.type === 3" class="img-list">
						<view class="img-box" v-for="(imgItem, index) in item.imageDtos">
							<image class="mediaType"
								:src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"
								mode="">
							</image>
							<image class="play-icon"
								src="https://www.worldintek.com:39011/yaolexue-service/icon_playCircle.png" mode=""></image>
						</view>

						<!-- <audio class="mediaType"
							:src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"></audio> -->
					</view>
					<view v-else class="img-list">
						<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
					<view class="time">
						{{ item.createTime }}
					</view>
				</view>
				<u-loadmore marginTop="40" :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			list: [],
			queryInfo: {
				page: 1,
				limit: 6
			},
			total: 0,
			isloading: false,
			status: 'loading',

		};
	},
	onLoad(options) {
		this.keyword = options?.keyword ?? ''
		this.getList()
	},
	onReachBottom() {
		if (this.isloading) return;

		// if(this.queryInfo.page * this.queryInfo.limit >= this.total) return  this.status = 'nomore'
		this.queryInfo.page += 1
		this.getList()
	},
	methods: {
		async getList(cb) {
			this.isloading = true
			const res = await this.$http.get('/yaolexue-service-portal/home/pageContentItemSearch', {
				title: this.keyword,
				...this.queryInfo
			}, {
				showLoading: true
			})
			this.isloading = false
			cb && cb()
			if (this.queryInfo.page = 1) this.list = []
			this.list = [...this.list, ...res.data.items]
			this.total = res.data.total
			this.status = this.list.length >= res.data.total ? 'nomore' : 'loading'
		},
		clickJump(item) {
			let url = ''
			switch (item.type) {
				case 1:
					url = `/pages/imgtxtDetails/imgtxtDetails?id=${item.id}`
					break;
				case 2:
					url = `/pages/VideoItemDetail/VideoItemDetail?id=${item.id}`
					break;
				case 3:
					url = `/pages/AudioItemList/AudioItemList?id=${item.albumId}&cid=${item.id}`
					break;
			}
			uni.navigateTo({
				url
			})
		},
		searchChange() {
			this.queryInfo.page == 1
			this.status = 'loading'
			this.getList()
		}
	},

}
</script>

<style lang="scss">
.search-page {

	.search-list {
		height: 113rpx;
		line-height: 113rpx;
		background-color: #FFF;
		position: sticky;
		top: 0;
		z-index: 999;
		overflow: hidden;

		.u-search {
			margin-bottom: 24rpx;
		}
	}


	.list {
		background: #fff;
		margin-top: 17rpx;
		height: 100vh;
		overflow: scroll;

		.list-item {
			border-bottom: 1px solid rgba(204, 204, 204, 0.5);

			// width: 100%;
			.img-box {
				position: relative;
				width: 220rpx;
				height: 130rpx;
				border-radius: 10rpx;

				&:not(:nth-child(3n)) {
					/* margin-right: 14rpx; */
					margin-right: calc((100% - 660rpx) / 2);
				}
			}

			.title {
				width: 476rpx;
				height: auto;
				font-size: 30rpx;
				font-family: SimSun;
				font-weight: 400;
				color: #333333;
				margin: 31rpx 0 19rpx 0;

			}

			.img-list {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 130rpx;

				.mediaType {

					width: 220rpx;
					height: 130rpx;
					background: #E1E1E1;
					border-radius: 10rpx;
					background: #E1E1E1;

					&:nth-child(2) {
						margin: 0 18rpx
					}
				}

				.play-icon {
					width: 52rpx;
					height: 52rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.time {
				width: auto;
				height: auto;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 31rpx;
				text-align: right;
				margin: 23rpx 0 28rpx 0;
				overflow: hidden;
			}
		}
	}
}</style>